<template>
  <div class="search">
    <f-form ref="form" :action="api.dictData" :form-key="this.formItem.dictDataId">
      <f-form-item label="字典分类" name="dictId" type="select" :data="api.dict.list" :value="formItem.dictId" label-key="dicTitle" value-key="dictId"/>
      <f-form-item label="字典名称" name="dicDataTitle" :required="true" :value="formItem.dicDataTitle"/>

      <f-form-item label="状态" name="state" type="radio" v-if="load"  :data="api.dictData.dicStatus" :value="formItem.state"/>
      <f-form-item label="展现方式" name="dictDataType" data-type="number" type="radio" v-if="load"  :data="api.common.dictDataType" :value.sync="formItem.dictDataType"/>
      <f-form-item label="字典值" name="dicDataValue" :value="formItem.dicDataValue" v-if="formItem.dictDataType==1"/>
      <f-form-item label="排序值" type="number" data-type="number" :required="true" name="sortOrder" :value="formItem.sortOrder"/>
      <f-form-item type="other" label="字典值" v-if="formItem.dictDataType==2&&load">
        <template v-for="(item,index) in options">
          <a-input placeholder="键(示例:红色)" style="width: 20%;" v-model="item.label">
          </a-input>
          <a-input placeholder="值(示例:#FF0000)" style="width: 30%;margin-left: 5px" v-model="item.value">
          </a-input>
          <a-icon class="dynamic-delete-button" type="minus-circle-o" @click="() => remove(index)" v-if="index>0"/>
          <br>
        </template>
      </f-form-item>
      <f-form-item type="other" style="margin-left: 105px" v-if="formItem.dictDataType==2">
        <a-button type="dashed" style="width: 50%" @click="add">
          <a-icon type="plus"/>
          添加字典值
        </a-button>
      </f-form-item>
    </f-form>
  </div>
</template>

<script>
  export default {
    name: 'dictDataForm',
    props: {},
    data() {
      return {
        isAdd: true,
        load: false,
        options: [{ label: '', value: '' }],
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem() {
        return {
          dicStatus: 1,
          dictDataType: 1
        }
      },
      add() {
        this.options.push({ label: '', value: '' })
      },
      remove(index) {
        this.options.splice(index, 1)
      },
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        if (data && data.dictId) {
          this.formItem.dictId = data.dictId
        }
        this.isAdd = true
        if (data && data.dictDataId) {
          this.formItem = data
          this.isAdd = false
          console.log(this.formItem)
          if (data.dictDataType == 2) {
            this.options = JSON.parse(data.dicDataValue)
          }
          this.load = true
        } else {
          this.load = true
        }
      },
      handleSubmit() {
        if (this.formItem.dictDataType == 2) {
          this.formItem.dicDataValue = JSON.stringify(this.options)
        }
        this.$refs.form.handlerSubmit({ dicDataValue: this.formItem.dicDataValue })
      }
    },
    created() {

    },
    components: {}
  }
</script>
<style rel="stylesheet/less">
  .dynamic-delete-button {
    cursor: pointer;
    margin-left: 5px;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .m-colorPicker .box[data-v-11842410] {
    width: 220px;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>

